<template>
  <el-dialog
    :title="title"
    class="peopleSingleChoose"
    :visible.sync="dialogVisible"
    width="62%"
    :append-to-body="true"

    :before-close="handleClose"
  >
    <el-row style="height:60vh">
      <el-col :span="6" style="height:100%">
        <pageCard :title-name="'部门树'" style="height:100%" :type="'smallTitle'">
          <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
          <el-tree
            ref="tree"
            :data="departmentTree"
            default-expand-all
            node-key="id"
            highlight-current
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :props="defaultProps"
            :render-content="renderContent"
            @node-click="nodeClick"
          />
        </pageCard>
      </el-col>
      <el-col :span="18" style="height:100%">
        <pageCard :title-name="'用户信息'" :type="'smallTitle'">
          <div>
            <div class="topText">用户姓名/登录名：</div>
            <el-input v-model="search.userName" placeholder="请输入搜索内容" class="searchInput">
              <el-button slot="append" icon="el-icon-search" @click="searchClick" />
            </el-input>
          </div>
          <myTable
            ref="myTable"
            style="height:95%"
            :row-key="'userId'"
            :table-label="tableLabel"
            :table-data="tableData"
            :table-total-size="tableTotalSize"
            :search-data="searchData"
            @getTableData="getTableData"
            @rowClickChange="rowClickChange"
          >
            <template v-slot:roleNames="slotProps">
              <!-- <el-tag v-for="(item,tagIndex) in slotProps.propValue" :key="tagIndex">{{ item }}</el-tag> -->
              <div v-for="(item,tagIndex) in slotProps.propValue" :key="tagIndex" style="display:inline;padding-right:5px">{{ item }}</div>
            </template>
          </myTable>
          <pagination :table-total-size="tableTotalSize" :search-data="searchData" @getTableData="$refs.myTable.getTableData()" />
        </pageCard>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="submit">选 择</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getDepartmentNodeTree, getDepartmentUser } from '@/api/table'
import pageCard from '@/components/page/pageCard'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
export default {
  name: 'PeopleSingleChoose',
  components: {
    pageCard,
    myTable,
    pagination
  },

  data() {
    return {
      dialogVisible: false,
      title: '选择人员',
      // 部门树数据
      filterText: '',
      departmentTree: [
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      departmentId: null,
      // 表格数据
      search: {
        userName: ''
      },
      searchData: {
        pageSize: 10,
        currentPage: 1,
        sort: {},
        params: {}
      },
      // table需要的数据
      tableData: [],
      tableLabel: [
        // {
        //   type: 'selection',
        //   width: '55'
        // },
        {
          prop: 'userId',
          label: '用户ID',
          width: 100,
          showOverflowTooltip: false
        },
        {
          prop: 'loginName',
          label: '登录账号',
          showOverflowTooltip: false
        },
        {
          prop: 'userName',
          label: '用户名称',
          // minWidth: 120,
          width: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'mobileTel',
          label: '手机号码',
          width: 150,
          showOverflowTooltip: false
        },
        {
          prop: 'departmentName',
          label: '部门',
          width: 200,
          showOverflowTooltip: false
        }
      ],
      tableTotalSize: null,
      indexx: null, // formItem的index
      rowData: {
        id: null,
        value: ''
      },
      rowAllData: {}
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 进入此页面初始化函数
    is(indexx, title) {
      this.title = title
      this.dialogVisible = true
      this.indexx = indexx
      this.departmentTree = []
      getDepartmentNodeTree().then(res => {
        this.departmentTree.push(res.data)
      })
    },
    // 提交函数
    submit() {
      this.$emit('submit', this.indexx, this.rowData, this.rowAllData)
      this.handleClose()
    },
    // 关闭函数
    handleClose() {
      this.dialogVisible = false
    },
    // 点击行回调函数
    rowClickChange(val) {
      this.rowData.id = val.userId
      this.rowData.value = val.userName
      this.rowAllData = val
    },
    getTableData(cab) {
      getDepartmentUser(this.searchData).then(res => {
        this.tableData = res.data
        this.tableTotalSize = res.total_count
        cab(res.data)
      })
    },
    // 搜索
    searchClick() {
      this.searchData.currentPage = 1
      this.searchData.params['userName'] = this.search.userName
      this.$refs.myTable.getTableData()
    },
    // 以下树函数
    nodeClick(node) {
      this.departmentId = node.id
      if (node.company) {
        this.searchData.params['departmentId'] = null
      } else {
        this.searchData.params['departmentId'] = node.id
      }
      this.$refs.myTable.getTableData()
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3])
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    renderContent(createElement, { node, data, store }) {
      return createElement('span', [
        createElement('span', { attrs: { class: 'el-icon-office-building' }}),
        createElement('span', { attrs: { class: 'tree-spt' }}, node.label)
      ])
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/pageTableTop.scss";
.peopleSingleChoose {
  height:99%;
  /deep/ .el-dialog__body {
    padding: 0px;
  }
  /deep/ .el-dialog__title{
    font-size: 21px;
  }
  /deep/ .el-tree {
    border-right: none;
    .tree-spt {
      padding-left: 15px;
    }
    /deep/ .el-tree-node .is-current {
      background-color: #f5f7fa;
    }
    /deep/ .el-tree-node__expand-icon {
      float: right;
      margin-right: 1.5625rem !important;
    }
    /deep/ .el-tree-node__content {
      height: 2.0rem;
      line-height: 2.0rem;
      font-size: 15px;
    }
    /deep/ .el-tree--highlight-current
      /deep/ .el-tree-node.is-current
      >  .el-tree-node__content {
      background: #ecf5ff;
    }
  }
  /deep/ .el-input-group__append {
    padding: 0px 10px;
  }
}
</style>
